<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>
</head>
<body>

<div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#Catalog").hide().fadeIn();
        });
    </script>
</div>

    <div th:replace="common/top">
    </div>
    <div id="Catalog">
        <form th:action="@{/account/SaveInformation}" method="post">
            <script type="text/javascript" src="../js/index.js"> </script>
            <br>
            <br>
            <br>
            <!--  标题进度条 start-->
            <div class="content" style="margin: 2% 30%;width: 100%;">
                <div class="processBar">
                    <div id="line0" class="bar">
                        <div id="point0" class="c-step c-select"></div>
                    </div>
                    <div class="text" style="margin: 10px -25px;"><span class='poetry'>User Information</span></div>
                </div>
                <div class="processBar">
                    <div id="line1" class="bar">
                        <div id="point1" class="c-step"></div>
                    </div>
                    <div class="text" style="margin: 10px -30px;"><span class='poetry'>Account Information</span></div>
                </div>
                <div class="processBar">
                    <div id="line2" class="bar" style="width: 0;">
                        <div id="point2" class="c-step"></div>
                    </div>
                    <div class="text" style="margin: 10px -30px;"><span class='poetry'>Language Preference:</span></div>
                </div>
            </div>
            <!--  标题进度条 end-->
            <div style="clear: both;"></div>
            <div id="MainContent" style="margin: 2% 30%;">
                <div class="content" id="basicInfo">
                    <table>
                        <tr>
                            <th colspan=2>User Information</th>
                        </tr>
                        <tr>
                            <td>User ID:</td>
                            <td>
                                <input type="text" name="username" id="username"  placeholder="Username" onblur="usernameIsExist();" required>
                                <div id="usernameInfo"></div>
                                <script type="text/javascript" src="../js/register.js"></script>
                            </td>
                        </tr>
                        <tr>
                            <td>New Password:</td>
                            <td>
                                <input type="password" name="password" id="password" placeholder="New password" onblur="passwordExit()" required>
                                <div id="passwordInfo"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>Repeat password:</td>
                            <td>
                                <input type="password" name="repeatedPassword" id="repeatedPassword" placeholder="Repeat password" onblur="checkPass()"  required>
                                <div id="repeatedPasswordInfo"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>VerificationCode:</td>
                            <td>
                                <input type="text" name="vCode" size="5" maxlength="6" placeholder="VerificationCode">
                                <a href="#" onclick="checkcode()"><img id="code"  border="0" src="/account/verificationCode" name="code"></a>
                                <script type="text/javascript">
                                    function checkcode(){
                                        document.getElementById("code").src=document
                                            .getElementById("code").src + "?nocache="+ new Date().getTime();
                                    }
                                </script>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right">
                                <font color="#FF6984" th:text="${msg}">${requestScope.msg}</font>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="content" id="education">
                    <table>
                        <tr>
                            <th colspan=2>Account Information</th>
                        </tr>

                        <tr>
                            <td>*First name:</td>
                            <td>
                                <input type="text" name="firstName" id="firstName" placeholder="First name" onblur="firstNameExit()" required/>
                                <div id="firstNameInfo"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>*Last name:</td>
                            <td>
                                <input type="text" name="lastName" id="lastName" placeholder="Last name" onblur="lastNameExit()" required/>
                                <div id="lastNameInfo"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>Email:</td>
                            <td>
                                <input type="text" name="email" id="email" size="40" placeholder="Email" />
                            </td>
                        </tr>
                        <tr>
                            <td>Phone:</td>
                            <td><input type="text" name="phone" placeholder="Phone"/></td>
                        </tr>
                        <tr>
                            <td>Status:</td>
                            <td>
                                <input class="input-sign" type="text" name="status"  placeholder="Status" />
                            </td>
                        </tr>
                        <tr>
                            <td>*Address 1:</td>
                            <td>
                                <input type="text" name="address1" id="address1" size="40" placeholder="Address1" onblur="address1Exit()" required/>
                                <div id="address1Info"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>Address 2:</td>
                            <td><input type="text" name="address2" size="40" placeholder="Address2"/></td>
                        </tr>
                        <tr>
                            <td>*City:</td>
                            <td>
                                <input type="text" name="city" id="city" placeholder="City" onblur="cityExit()" required/>
                                <div id="cityInfo"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>*State:</td>
                            <td>
                                <input type="text" size="4" name="state" id="state" placeholder="State" onblur="stateExit()" required/>
                                <div id="stateInfo"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>*Zip:</td>
                            <td>
                                <input type="text" size="10" name="zip" id="zip" placeholder="Zip" onblur="zipExit()" required/>
                                <div id="zipInfo"></div>
                            </td>
                        </tr>
                        <tr>
                            <td>*Country:</td>
                            <td>
                                <input type="text" size="15" name="country" id="country" placeholder="Country" onblur="countryExit()" required/>
                                <div id="countryInfo"></div>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="content" id="work">
                    <table>
                        <tr>
                            <th colspan=2>Profile Information</th>
                        </tr>

                        <tr>
                            <td>Language Preference:</td>
                            <td><select name="languagePreference" id="languagePerference">
                                <option value="English" selected="selected">English</option>
                                <option value="Chinese" >Chinese</option>
                                <option value="Japanese" >Japanese</option>
                                <option value="Korean">Korean</option>
                                <option value="German">German</option>
                                <option value="French" >French</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td>Favourite Category:</td>
                            <td><select name="favouriteCategoryId">
                                <option value="FISH" selected="selected">FISH</option>
                                <option value="DOGS" >DOGS</option>
                                <option value="REPTILES" >REPTILES</option>
                                <option value="CATS" >CATS</option>
                                <option value="BIRDS">BIRDS</option>
                            </select></td>
                        </tr>
                        <tr>
                            <td>Enable MyList</td>
                            <td><input type="checkbox" name="listOption" value="1" /></td>
                        </tr>
                        <tr>
                            <td>Enable MyBanner</td>
                            <td><input type="checkbox" name="bannerOption" value="1" /></td>
                        </tr>
                    </table>
                </div>

            </div>
            <div style="clear: both;"></div>
            <div style="text-align: center;">
                <button  type="button" id="previous_step" style="width:100px;height:60px">back</button>
                <button type="button" id="next_step" style="width:100px;height:60px">next</button>
                <button id="finish" style="width:120px;height:60px">FINISH</button>
            </div>
        </form>

</div>
<div th:replace="common/bottom"></div>
</body>
</html>